<template>
	<view>
		<login></login>
		<view class="release">
			<view class="pic">
				<text>我的物品</text>
			</view>
			<view class="put-textarea">
				<input type="text" placeholder="添加你的商品描述..." v-model="message1" />
			</view>
			<view class="tik">
				<button type="default" class="button1" @click="button1">物物交易</button>
				<button type="default" class="button2" @click="button2">货币交易</button>
			</view>
			<view class="get-textarea" v-if="dealType">
				<input type="text" placeholder="置换的产品..." v-model="message2" />
			</view>
			<view class="getmoney" v-if="!dealType">
				<text>输入您的定价：</text>
				<input type="number" placeholder="$" v-model="message3" />
			</view>
			<view class="pics">
				<view class="medias" v-for="( image, index ) in uploadPicsList" :key="index">
					<image class="img" :src="image.path" :data-src="image" @tap="previewImage(index)"
						mode="aspectFill" />
					<u-icon name="close" class="iclose" color="#ff4c4c" size="20" @tap="removeImage(index)" />
				</view>

				<!-- 选择照片按钮 -->
				<view class="uploadBtn" @tap="chosePicsAndUpload" v-if="uploadPicsList.length < 4">
					<u-icon name="plus" size="60" color="#ff4c4c" />
					<view class="text">选择照片</view>
				</view>

			</view>
			<button type="default" @click="uploadimg" class="upImg">上传图片</button>

			<view class="btns">
				<u-button type="success" size="default" @click="sendFeed" :disabled="uploadStatus">发布动态</u-button>
			</view>
		</view>
	</view>

</template>

<script>
	const DB = wx.cloud.database()
	let imgUrl = [];
	export default {
		created() {
			uni.$on('getOpenid', (id) => {
				this._openid = id
				console.log("sad", id)
			})
			uni.$on('getId', (id) => {
				this.id = id
				console.log("id", this.id)

			})
		},
		data() {
			return {
				message1: '',
				message2: '',
				message3: '',
				uploadPicsList: [],
				dealType: true,
				_openid: '',
				id: '',
			}
		},
		methods: {
			button1() {
				this.dealType = true
			},
			button2() {
				this.dealType = false
			},

			chosePicsAndUpload() {
				console.log("this.feedInfo")
				let count = 4 - this.uploadPicsList.length;
				if (this.uploadPicsList.length >= 4) {
					uni.showToast({
						title: "最多选择4张照片",
						icon: "success",
						duration: 1000,
					});
					count = 0;
					return false;
				}
				uni.chooseImage({
					count, //默认9
					sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择
					success: (res) => {
						console.log("选择成功", res)
						this.uploadPicsList = [...this.uploadPicsList, ...res.tempFiles];
						if (this.uploadPicsList.length > 4) {
							this.uploadPicsList = this.uploadPicsList.slice(0, 4);
						}
						console.log("3333", this.uploadPicsList)
					},
				});
			},
			// 预览图片
			previewImage(index) {
				//预览图片
				var current = this.uploadPicsList[index].path;
				let urls = [];
				this.uploadPicsList.map((item) => {
					urls.push(item.path);
				});
				uni.previewImage({
					current: current,
					urls,
				});
			},
			// 删除图片
			removeImage(index) {
				this.uploadPicsList.splice(index, 1);
			},

			uploadimg() {
				for (let i = 0; i < this.uploadPicsList.length; i++) {
					console.log(this.uploadPicsList[i].path)
					// 将图片传入云服务器
					wx.cloud.uploadFile({
						cloudPath: 'pic1/' + new Date().getTime() + '.png', // 上传至云端的路径
						filePath: this.uploadPicsList[i].path, // 小程序临时文件路径					  
						success: (res) => {
							// 返回文件 ID
							console.log("上传成功", res.fileID)
							imgUrl[i] = res.fileID

						},
					})
				}
				uni.showToast({
					title: "图片上传中...",
					icon: "loading",
					duration: this.uploadPicsList.length * 3000,
					success: () => {
						console.log("上传成功！")
					}
				});
			},
			// 发布动态
			sendFeed() {

				console.log("asdasd")
				// 如果正在上传中则等待
				// if (this.uploadStatus) return
				// this.uploadStatus = true

				// 如果描述为空则不进行发布
				if (this.message1 == "") {
					uni.showToast({
						title: "描述不能为空",
						icon: "loading",
						duration: 2000,
					})
					this.uploadStatus = false
					return
				}

				if (this.uploadPicsList.length <= 0) {
					uni.showToast({
						title: "请选择照片",
						icon: "loading",
						duration: 1000,
					})
					this.uploadStatus = false
					return
				}
				if (imgUrl.length <= 0) {
					uni.showToast({
						title: "请上传照片",
						icon: "loading",
						duration: 1000,
					})
					this.uploadStatus = false
					return
				}
				console.log("222", this.uploadPicsList.length)
				console.log("222", imgUrl.length)
				if (imgUrl.length < this.uploadPicsList.length) {
					uni.showToast({
						title: "正在上传照片",
						icon: "loading",
						duration: 1000,
					})
					this.uploadStatus = false
					return
				}
				DB.collection('userList1').where({
					_openid: this._openid
				}).get({
					success: (resu) => {
						console.log("uuu", resu)
						DB.collection('list1').add({
							data: {
								name: resu.data[0].userName,
								avatar: resu.data[0].headPic,
								cover: imgUrl,
								message1: this.message1,
								message2: this.message2,
								message3: this.message3,
							},
							success:(res)=> {
								// console.log("添加成功", res)
								uni.$emit("indexFeedsUpdate")
								uni.switchTab({
									url: '/pages/index/index'
								});
								let Data = {
									_id: res._id,
									_openid: this._openid,
									name: resu.data[0].userName,
									avatar: resu.data[0].headPic,
									cover: imgUrl,
									message1: this.message1,
									message2: this.message2,
									message3: this.message3,
								}
								console.log("asdasd",Data)
								const _ = DB.command
								DB.collection('shopcart01').doc(this.id).update({
									data: {
										run: _.push(Data),
									},
									success: (res3) => {
										uni.$emit("cartUpdate")
									},
									fail(res3) {
										console.log("添加失败")
									}
								})
							},
							fail(res) {
								console.log("添加失败", res)
							}
						})
						if (this.message2 != '') {
							DB.collection('list2').add({
								data: {
									name: resu.data[0].userName,
									avatar: resu.data[0].headPic,
									cover: imgUrl,
									message1: this.message1,
									message2: this.message2,
									message3: this.message3,
								},
								success(res) {
									console.log("添加成功2", res)
								},
							})
						} else {
							DB.collection('list3').add({
								data: {
									name: resu.data[0].userName,
									avatar: resu.data[0].headPic,
									cover: imgUrl,
									message1: this.message1,
									message2: this.message2,
									message3: this.message3,
								},
								success(res) {
									console.log("添加成功3", res)
								},
							})
						}
					}
				})



				// 状态更新
				uni.showToast({
					title: "动态发布中...",
					icon: "loading",
					duration: 3000,
					success: () => {
						this.uploadPicsList = [];

					}
				});
			}

		}

	}
</script>

<style lang="scss" scoped>
	.release {
		width: 750upx;
		margin-top: 20upx;
		margin-bottom: 200upx;

		.put-textarea {
			height: 120rpx;
			margin: 20upx 50upx;
			padding: 10upx;
			border-radius: 10upx;
			border: 1upx solid #ccc;
		}

		.pic {
			width: 650rpx;
			height: 80rpx;
			text-align: center;
			margin: auto;
			background-color: #F0AD4E;
			line-height: 80rpx;
			border-radius: 10upx;

			text {
				font-size: 40rpx;
				font-weight: 600;
				color: #FFFFFF;
			}
		}

		.tik {
			margin: auto;
			width: 700rpx;
			height: 80rpx;
			display: flex;
			justify-content: space-between;

			.button1 {
				line-height: 80rpx;
				background-color: #F29100;
				font-size: 40rpx;
				font-weight: 600;
				color: #FFFFFF;

			}

			.button2 {
				line-height: 80rpx;
				background-color: #FA3534;
				font-size: 40rpx;
				font-weight: 600;
				color: #FFFFFF;
			}
		}

		.get-textarea {
			height: 120rpx;
			margin: 20upx 50upx;
			padding: 10upx;
			border-radius: 10upx;
			border: 1upx solid #ccc;

		}

		.getmoney {
			width: 240px;
			height: 120rpx;
			margin: 20upx 130upx;
			padding: 10upx;
			border-radius: 10upx;
			border: 1upx solid #ccc;
			display: flex;
			justify-content: space-around;

			input {
				margin-right: 40rpx;
				width: 200rpx;
				height: 60rpx;
				border: 1upx solid #ccc;
			}
		}


		.pics {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			padding-top: 20upx;
			padding-bottom: 20upx;
			padding-left: 46upx;

			.medias {
				width: 210upx;
				height: 210upx;
				background-color: #eee;
				border-radius: 6upx;
				margin: 5upx;
				position: relative;

				.iclose {
					position: absolute;
					right: 0;
					top: 0;
					background-color: rgba($color: #333, $alpha: 0.6);
					border-bottom-left-radius: 100%;
					padding: 10upx 10upx 16upx 16upx;
					z-index: 999;
				}
			}

			.img {
				width: 210upx;
				height: 210upx;
				border-radius: 6upx;
			}

			.video {
				width: 210upx;
				height: 210upx;
				border-radius: 6upx;
			}

			.uploadBtn {
				width: 200rpx;
				height: 200rpx;
				background-color: #eee;
				border-radius: 6upx;
				margin: 5upx;
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				align-content: center;

				.text {
					color: #888;
					font-size: 24upx;
					margin-top: 20upx;
				}
			}
		}

		.upImg {
			width: 400rpx;
			height: 80rpx;
			color: #FFFFFF;
			background-color: #007AFF;
			line-height: 80rpx;
			border-radius: 40rpx;
		}

		.btns {
			width: 700upx;
			position: fixed;
			bottom: 40upx;
			left: 25upx;
		}
	}
</style>
